<template>
	<view class="event-details">
		<navbar ref="navbar"  backColor="#000" :config="config"></navbar>
		<view class="middle">
			<!-- 活动消息 -->
			<view v-if="type==0">
				<view v-if="msgList.length>=0">
					<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
						<view class="box">
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
						<view class="content">
							<view class="title">
								{{item.remark}}
							</view>
							<view class="image">
								<image :src="item.message_body.img" mode="widthFix"
									style="width: 100%;border-radius: 30rpx"></image>
							</view>
						</view>
					</view>
					<loadMore v-if="msgList.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
			</view>
			<view v-if="type==1">
				<!-- 支付消息 -->
				<!-- 			<view v-if="msgList.length>0">
			<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
				<view class="box">
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
				<view class="content">
					<view class="title">
						{{item.remark}}
					</view>
					<view class="image">
						<image :src="item.message_body.goods[0].goods_img" mode=""></image>
					</view>
				</view>
			</view>
			<loadMore v-if="msgList.length>0" :status="status"></loadMore>
			</view>
			<nodata v-if="noData" :config="{top:20,content:'暂无消息~'}"></nodata> -->
				<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
					<view v-if="item.message_body.goods.length>1">
						<view class="box">
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
						<view class="content" style="padding: 44rpx 0;">
							<view class="title" style="padding: 0 30rpx;">
								订单已支付
							</view>
							<view class="single-data">
								<view class="img-box u-border-one" style="display: flex;">
									<view v-for="(i,v) in item.message_body.goods" class="single-img">
										<image class="goods-img" :src="i.goods_img" v-if="v<3"></image>
									</view>
								</view>
								<view class="single-bottom">

									<text>共{{item.message_body.goods_num}}件商品，实付金额 </text>
									<!-- item.message_body.goods_num -->
									<view class="money">
										<rich-text :nodes="$mUtil.priceBigSmall(item.message_body.money)">
										</rich-text>
									</view>

									<!-- 	{{item.message_body.money}} -->

								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="box">
							<view class="time u-text2">
								{{item.create_time}}
							</view>
						</view>
						<view class="content">
							<view class="title">
								订单已支付
							</view>
							<view class="small-box">
								<view v-if="item.message_body.goods_type==4">
									<view class="small-left">
										<image :src="imgUrl+'/delImg/recharge.png'" mode=""></image>
									</view>
								</view>
								<view v-else>
									<view class="small-left">
										<image :src="item.message_body.goods[0].goods_img" mode=""></image>
									</view>
								</view>


								<view v-if="item.message_body.goods_type==3">
									<view class="small-right">
										<view class="small-top u-text2 ">
											{{item.message_body.goods[0].goods_name}}
										</view>
										<view class="specifications u-mt50">
											规格：<text>{{item.message_body.goods[0].goods_spec}}</text>
										</view>
										<view class="price">
                      积分
											{{item.message_body.total_point}}
										</view>
									</view>
								</view>
								<view v-else>
									<view class="small-right">
										<view class="small-top u-text2 ">
											{{item.message_body.goods[0].goods_name}}
										</view>
										<view>
											<view class="price">
												<text
													style="font-size: 30rpx; color: #474747; ">￥{{item.message_body.money%1==0?item.message_body.money+'.00':item.message_body.money}} * {{item.message_body.goods_num}}</text>
												<!-- <text style="margin-left: 13rpx; color: #AAAAAA;"></text> -->
											</view>
											<view class="specifications u-mt10" v-if="item.message_body.goods[0].goods_spec">
												规格：<text>{{item.message_body.goods[0].goods_spec}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="item.message_body.goods_type==3">
								<view class="bottom-box">
									共{{item.message_body.goods_num}}件商品，实付积分<text>{{item.message_body.total_point}}</text>
									<view v-if="item.message_body.total_amount" style="margin-left: 4rpx;">含运费+税费<text
											style="margin-left: 4rpx;">{{item.message_body.total_amount}}元</text></view>
								</view>
							</view>
							<view v-else>
								<view class="bottom-box">
									<text>共{{item.message_body.goods_num}}件商品，实付金额 </text>
									<view class="money">
										<rich-text :nodes="$mUtil.priceBigSmall(item.message_body.total_amount)">
										</rich-text>
									</view>


								</view>
							</view>

						</view>
					</view>

				</view>
				<loadMore v-if="msgList.length>0" :status="status"></loadMore>
			</view>
			<view v-if="type==2">
				<view v-if="msgList.length>0">
					<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
						<view class="box">
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
						<view class="content">
							<view v-if="item.message_body.logistics_status==0">
								<view class="logistics-top">
									订单已发货
								</view>
							</view>
							<view v-if="item.message_body.logistics_status==1">
								<view class="logistics-top">
									订单已收货
								</view>
							</view>

							<view class="logistics-box">
								<view class="logistics-left">
									<image :src="item.message_body.goods[0].goods_img" mode=""></image>
								</view>
								<view class="logistics-right">
									<view class="logistics-right-top u-text2">
										{{item.message_body.goods[0].goods_name}}
									</view>
									<!-- 修改积分字段 -->
									<view v-if="item.message_body.exchange==true">
										<view class="logistics-right-content">
											￥{{item.message_body.money}}元 + {{item.message_body.total_point}}积分
											<text>x{{item.message_body.goods_num}}</text>
										</view>
									</view>
									<view v-if="item.message_body.exchange==false">
										<view class="logistics-right-content">
											￥{{item.message_body.money}} <text>x{{item.message_body.goods_num}}</text>
										</view>
									</view>

									<view class="logistics-right-bottom">
										物流单号：{{item.message_body.logistic_code}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<loadMore v-if="msgList.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
			</view>
			<view v-if="type==3">

				<!-- 				<view v-if="msgList.length>=0">
					<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
						<view class="box">
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
						<view class="content">
							<view class="title">
								{{item.remark}}
							</view>
							<view class="image">
								<image :src="item.message_body.goods[0].goods_img" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<loadMore v-if="msgList.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata> -->
				<view v-if="msgList.length>=0">
					<view class="after-sales" v-for="(item,index) in msgList" :key="index"
						@click="goToGbOrderDetails(item)">
						<view v-if="item.message_body.goods.length>1">
							<view class="box">
								<view class="time">
									{{item.create_time}}
								</view>
							</view>
							<view class="after-sales-msg">
								<view class="title" v-if="item.message_body.rights_status==0">
									商家已同意
								</view>
								<view class="title" v-if="item.message_body.rights_status==1">
									商家拒绝维权
								</view>
								<view class="title" v-if="item.message_body.rights_status==2">
									商家已收货
								</view>
								<view class="title" v-if="item.message_body.rights_status==3">
									商家已退款
								</view>
								<view class="title" v-if="item.message_body.rights_status==4">
									商家发起自动退款
								</view>

								<view class="multigraph">
									<view v-for="(x,y) in item.message_body.goods" :key="y">
										<image :src="x.goods_img" v-if="y<3" mode=""></image>
									</view>
								</view>

								<view class="refund-amount">
									退款金额￥{{item.message_body.money}}<text v-if="item.message_body.refund_point>0">,
										退款积分{{item.message_body.refund_point}}</text>
								</view>
							</view>
						</view>
						<view class="" v-else>
							<view class="box">
								<view class="time">
									{{item.create_time}}
								</view>
							</view>
							<view class="after-sales-msg">
								<view class="title" v-if="item.message_body.rights_status==0">
									商家已同意
								</view>
								<view class="title" v-if="item.message_body.rights_status==1">
									商家拒绝维权
								</view>
								<view class="title" v-if="item.message_body.rights_status==2">
									商家已收货
								</view>
								<view class="title" v-if="item.message_body.rights_status==3">
									商家已退款
								</view>
								<view class="title" v-if="item.message_body.rights_status==4">
									商家发起自动退款
								</view>
								<view class="article">
									<view class="article-left">
										<image :src="item.message_body.goods[0].goods_img" mode=""></image>
									</view>
									<view class="article-right">
										<view class="msg-title u-text2">
											{{item.message_body.goods[0].goods_name}}
										</view>
										<view class="specifications">
											{{item.message_body.goods[0].goods_spec}}
										</view>
										<view class="refund u-flex" style="justify-content: space-between;">
											<!-- 退款金额：¥ {{item.message_body.money}} -->
											<view class="refund">
												退款金额：¥ {{item.message_body.money}}
											</view>
											<view class="refund" v-if="item.message_body.refund_point>0">退款积分：
												{{item.message_body.refund_point}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<loadMore v-if="msgList.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
			</view>
			<view v-if="type==4">
				<view v-if="msgList.length>=0">
					<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
						<view class="box">
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
						<view class="content">
							<view class="title">
								{{item.remark}}
							</view>
							<view class="bottom-time">
								{{item.create_time}}
							</view>
						</view>
					</view>
					<loadMore v-if="msgList.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
			</view>

			<view v-if="type==5">
				<view v-if="msgList.length>=0">
					<view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
						<view class="box">
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
						<view class="content">
							<view class="title label" v-if="JSON.parse(item.msg).type == 0">
								区县运营中心审核消息提醒
							</view>
							<view class="title">
								{{item.remark}}
							</view>
							<view class="bottom-time">
								{{item.create_time}}
							</view>
						</view>
					</view>
					<loadMore v-if="msgList.length>0" :status="status"></loadMore>
				</view>
				<nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
			</view>

		</view>
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					title: '',
					back: true, //false是tolbar页面 是则不写
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#F9F9F9"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				status: "more",
				params: { //分页
					page: 1,
					limit: 10,
				},
				type: null,
				msgList: [],
				loading: true,
				noData: false,
				totalPage: null,
				currPage: 1,
				listArr: [],
				imgUrl: this.$mConfig.staticUrl
			}

		},
		onLoad(options) {
			this.getType(options.type)
			this.type = options.type
			this.delMsg(options.type)
			this.config.title = options.name
		},
		//上拉加载
		onReachBottom(e) {
			// this.status='loading'
			if (this.totalPage <= this.currPage) {
				this.status = "noMore";
			} else {
				this.status = "more"
				this.params.page++
				this.getType(this.type)
			}
		},

		//下拉刷新
		onPullDownRefresh() {
			this.rest()
			this.getType(this.type)
		},
		methods: {
			goToGbOrderDetails(item) {
				//活动消息
				if (this.type == 0) {
					let activityType = item.message_body.activity_type
					if (activityType == 1) {
						uni.navigateTo({
							url: "../../research/nearby/timeLimit"
						})
					}
					if (activityType == 2) {
						uni.navigateTo({
							url: "../../research/homepage/groupList"
						})
					}
				}
				//支付消息
				if (this.type == 1) {
					console.log(item)
					let goodsType = item.message_body.goods_type
					if (goodsType == 0) {
						let id = item.message_body.order_id
						uni.navigateTo({
							url: `../../order/orderList/orderDetails?id=${id}&status=pay`
						})
						//普通商品完成
					}
					if (goodsType == 1) {
						let id = item.message_body.order_id
						console.log(id)
						uni.navigateTo({
							url: `../../order/orderList/serviceOrderDetail?id=${id}&status=pay`
						})
						//服务详情完成
					}
					if (goodsType == 2) {
						let id = item.message_body.order_id
						console.log(item.message_body.activity_type, "message_body")
						if (item.message_body.activity_type == 2) {
							uni.navigateTo({
								url: "../../order/gbOrder/gbOrderDetails?id=" + id + '&status=pay' + "&groupId=" +
									item.message_body
									.goods[0].team_member_id
							})
						}
						//跳转秒杀详情地址还没写上去
						else if (item.message_body.activity_type == 1) {
							uni.navigateTo({
								url: "../../product/goods/seckillGoods?id=" + item.message_body.goods[0].goods_id
							})
						}
						// uni.navigateTo({
						// 	url: `../../order/orderList/orderDetails?id=${id}&status=pay`
						// })

						//秒杀详情
						// let activityType= item.message_body.activity_type 
						// if(activityType == 0){
						// 	this.$mUtil.toast("暂无活动")
						// }
						// if(activityType==1){
						// 	uni.navigateTo({
						// 		url:"../../research/nearby/timeLimit"
						// 	})
						// }
						// if(activityType==2){
						// 	uni.navigateTo({
						// 		url:"../../research/homepage/groupList"
						// 	})
						// }
						//活动商品完成
					}
					//积分商品
					if (goodsType == 3) {
						let id = item.message_body.order_id
						console.log(item)
						console.log(id)
						uni.navigateTo({
							url: `../../order/orderList/orderDetails?id=${id}&status=pay`
						})
						//完成
					}
					if (goodsType == 4) {
						uni.navigateTo({
							url: "../../user/wallet/transactionDetail"
						})
					}
				}
				//物流消息
				if (this.type == 2) {
					let logisticsStatus = item.message_body.logistics_status
					if (logisticsStatus == 0) {
						let id = item.message_body.order_id
						console.log(id)
						console.log(item)
						uni.navigateTo({
							url: `../../order/orderList/orderDetails?id=${id}&status=pay`

						})
					}
					if (logisticsStatus == 1) {
						let id = item.message_body.order_id
						uni.navigateTo({
							url: `../../order/orderList/orderDetails?id=${id}&status=pay`
						})
					}
				}
				//售后消息
				if (this.type == 3) {
					let id = item.message_body.rights_order_id
					console.log(id)
					this.$http.get(`/rights/info/${id}`).then(res => {
						if (res && res.code == 200) {
							let shopid = res.data.shop_id
							let rightsType = res.data.rights_type
							let rightsRefundStatus = res.data.rights_operate_status
							// console.log("shopid",shopid,"rightsType" ,rightsType,"rightsRefundStatus" ,rights_operate_status,"id",id)
							// console.log(res)
							uni.navigateTo({
								url: "../../order/orderList/orderblackDetails?id=" + id + "&shopid=" +
									shopid + "&type=" + rightsType + "&status=" + rightsRefundStatus
							})
							console.log(666)
						}
					})
					//先全部跳售后详情
				}
				//互动消息
				if (this.type == 4) {
					let id = item.user_id
					let personalType = item.message_body.type
					// if (personalType == 0 || personalType == 2) {
					//   let id = item.message_body.model_id
					//   uni.navigateTo({
					//     url: "../recommend/details?id=" + id
					//   })
					// } else if (personalType == 1) {
					//   let id = item.user_id
					//   uni.navigateTo({
					//     url: "../community/homepage?user_id=" + id
					//   })
					// } else if (personalType == 3) {
					//   let id = item.message_body.model_id
					//   uni.navigateTo({
					//     url: "./toExamine?id=" + id
					//   })
					// } else if (personalType == 4) {
					//   let id = item.message_body.model_id
					//   uni.navigateTo({
					//     url: "./toBusiness?id=" + id
					//   })
					// }
					if (personalType == 4) {
						// let id = item.message_body.model_id
						uni.navigateTo({
							url: "/pages/user/merchant/audit"
						})
					} else if (personalType == 5) {
						uni.navigateTo({
							url: "/pages/workbench/shop/audit"
						})
					}
					console.log(personalType)
					// uni.navigateTo({
					// 	url:"../community/homepage?user_id="+id
					// })
				}

				// 系统消息
				if (this.type == 5) {
					console.log(item, 1111111111)
					if (item.message_body.type == 0) {
						uni.navigateTo({
							url: `/pages/user/regional-agency/index`
						})
					}
				}

			},
			//获取数据
			getType(type) {
				this.$http.get("/private/message/list/" + type, this.params).then(res => {
					if (res && res.code == 200) {
						this.loading = false
						uni.stopPullDownRefresh()

						this.msgList = this.msgList.concat(res.page.list)
						let newList = this.msgList.map(item => item.message_body)
						this.listArr = newList.map(item => item.goods)


						if (this.msgList.length == 0) {
							this.noData = true
						} else {
							this.noData = false
						}
						this.totalPage = res.page.totalPage
						this.currPage = res.page.currPage
						// console.log(11,this.totalPage)
						if (res.page.totalPage <= res.page.currPage) {
							this.status = "noMore";
						} else {
							this.status = "more"
						}
					}
				})
			},
			rest() {
				this.params.page = 1
				this.msgList = []
			},

			//删除页面的未读消息	
			delMsg(type) {
				this.$http.post(`/private/message/read-type/${type}`).then(res => {})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	// .height76{
	// 	height: 76rpx;
	// }
	.after-sales {
		.after-sales-msg {
			background-color: #FFFFFF;
			border-radius: 18rpx;

			.article {
				display: flex;

				.article-left {
					padding-left: 30rpx;
					padding-bottom: 62rpx;

					image {
						width: 165rpx;
						height: 156rpx;
						border-radius: 18rpx;
						overflow: hidden;
					}
				}

				.article-right {
					margin-left: 30rpx;
					padding-right: 30rpx;
					display: flex;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-bottom: 70rpx;

					.msg-title {
						color: #1A1A1A;
						font-weight: 400;
						font-size: 24rpx;
					}

					.specifications {
						font-size: 22rpx;
						color: #999999;
						font-weight: 400;
						line-height: 24rpx;
						margin-top: 4rpx;
					}

					.refund {
						color: #1A1A1A;
						font-size: 26rpx;
						font-weight: 400;
						margin-top: 16rpx;
					}
				}
			}

			.multigraph {
				display: flex;

				image {
					margin-left: 20rpx;
					width: 200rpx;
					height: 200rpx;
					border-radius: 18rpx;
				}
			}

			.refund-amount {
				text-align: right;
				margin-top: 60rpx;
				padding-bottom: 34rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #1A1A1A;
				margin-right: 30rpx;
			}

			.title {
				padding: 44rpx 30rpx 22rpx 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #1A1A1A;
			}
		}

		.box {
			display: flex;
			justify-content: center;

			.time {
				font-size: 22rpx;
				font-weight: 400;
				color: #474747;
				line-height: 30rpx;
				padding: 10rpx 20rpx;
				margin: 40rpx 0;
				border-radius: 24rpx;
				background-color: #E1E1E1;
			}
		}


	}

	.middle {
		padding: 0 40rpx;

		.item {
			.box {
				display: flex;
				justify-content: center;

				.time {
					font-size: 22rpx;
					color: #474747;
					font-weight: 400;
					background-color: #E1E1E1;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					margin: 40rpx 0;

				}
			}

			.content {
				overflow: hidden;
				padding: 44rpx 40rpx;
				// padding: 44rpx 0;
				background-color: #FFFFFF;
				border-radius: 40rpx;

				.bottom-time {
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
				}

				.logistics-top {
					font-size: 28rpx;
					color: #1A1A1A;
					font-weight: 400;
				}

				.logistics-box {
					margin-top: 22rpx;
					display: flex;

					.logistics-left {
						image {
							border-radius: 8rpx;
							width: 156rpx;
							height: 156rpx;
						}
					}

					.logistics-right {
						margin-left: 32rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;



						.logistics-right-content {
							color: #1A1A1A;
							font-size: 26rpx;
							font-weight: 400;
							margin-bottom: 8rpx;

							text {
								color: #999999;
								margin-left: 16rpx;
							}
						}

						.logistics-right-bottom {
							font-size: 22rpx;
							color: #999999;
							font-weight: 400;

						}
					}
				}

				.bottom-box {
					// text-align: right;
					display: flex;
					align-items: flex-end;
					// float: right;

					.money {
						color: #FF721B;
						font-size: 32rpx;
						// font-weight: Bold;
					}

				}

				.title {
					font-size: 28rpx;
					color: #474747;
					font-weight: 400;
					margin-bottom: 26rpx;
				}

				.label {
					font-weight: 700;
				}

				.small-box {
					margin-bottom: 20rpx;
					display: flex;

					.small-left {

						overflow: hidden;

						image {
							border-radius: 10rpx;
							width: 200rpx;
							height: 200rpx;
						}
					}

					.small-right {
						display: flex;
						flex-direction: column;
						height: 100%;
						justify-content: space-between;
						margin-left: 30rpx;

						.small-top {
							// flex: 1;
							font-size: 34rpx;
							line-height: 40rpx;
							color: #474747;
							font-weight: 400;

						}

						.specifications {
							font-size: 26rpx;
							color: #AAAAAA;
							font-weight: 400;
							margin-bottom: 14rpx;
						}

						.price {
							display: flex;
							color: #1A1A1A;
							font-size: 26rpx;
							font-weight: 400;


						}
					}

				}

				.single-data {
					overflow: hidden;

					.img-box {
						height: 230rpx;
						padding: 0 30rpx;
					}

					.single-img {

						display: flex;
						flex-wrap: nowrap;
						overflow: hidden;
						margin-left: 15rpx;

						.goods-img {
							width: 200rpx;
							height: 200rpx;
							// padding: 0 5rpx;
							border-radius: 10rpx;
							// margin-left: 10rpx;
						}

					}

					.single-img:first-child {
						margin-left: 0;
					}

					.single-bottom {
						float: right;
						text-align: right;
						margin-right: 40rpx;
						margin-top: 60rpx;
						display: flex;
						align-items: baseline;

						.money {
							color: #FF0000;
							font-size: 32rpx;
							font-weight: bold;
						}
					}

				}

				.image {
					image {
						width: 630rpx;
						height: 250rpx;
						border-radius: 15rpx;
					}
				}
			}

		}

	}

	.event-details {
		background-color: #F5F5F5;
	}
</style>